<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <router-link v-for="(item,index) in routerList"
                         :key="index"
                         :to="item.url">
                <div class="order-box block-box">
                    <div class="router-link main-color">
                        <div class="img-box">
                            <img :src="item.img">
                            <div>{{item.title}}</div>
                        </div>
                        <img src="../../assets/img/arrowFlag.png" class="arrowFlag">
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "OrderManage",
        data() {
            return {
                GetWindowBackground: {
                    'min-height': ''
                },
                routerList:[
                    {
                        title:'盘点列表',
                        img: require('../../assets/img/flag4.png'),
                        url:'/StockInventoryList'
                    },{
                        title:'报损单列表',
                        img: require('../../assets/img/flag5.png'),
                        url:'/LossReportList'
                    },{
                        title:'出库单列表',
                        img: require('../../assets/img/flag6.png'),
                        url:'/DeliveryList'
                    },{
                        title:'入库单列表',
                        img: require('../../assets/img/flag7.png'),
                        url:'/WarehouseList'
                    }
                ]
            }
        },
        methods: {
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },
    }
</script>

<style lang="scss" scoped>
    .block-box {
        padding: 18px 20px;
    }

    .order-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        a {
            width: 100%;
        }

        .router-link {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
            .img-box{
                display: flex;
                align-items: center;
                font-size: 16px;
                img{
                    width: 25px;
                    margin-right: 15px;
                }
            }
        }
        .arrowFlag {
            width: 15px;
            height: 15px;
        }
    }
</style>